<template>
    <div class="container" v-if="list.length>0" style="margin-top: 20px;">
        <el-page-header @back="goBack" style="margin-bottom: 20px;">
            <template #content>
            <span class="text-large font-600 mr-3"> {{ name }} </span>
            </template>
        </el-page-header>
        <div class="main"  v-for="(l, index) in list[0].data" :key="index" >
            <el-card :body-style="{ padding: '0px' }" style="padding: 10px;">
                <div class="card" @click="toDetail(l.title,l.detail,l.imgUrl)">
                    <el-image style="width: 100px; height: 100px" :src="l.imgUrl" fit="cover" />
                    <div class="footer">
                        <div>{{ l.title }}</div>
                        <p>{{ l.p }}</p>
                        <span>2023-03-14</span>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { findartistList, findartistListDetail } from '@/api/home.js'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default {
  setup () {
    const list = ref([])
    // const list2 = ref([])
    const route = useRoute()
    const router = useRouter()
    const name = route.query.title
    function getArtistList () {
      findartistList().then(res => {
        // console.log(res)
        if (res.code === '200') {
          list.value = res.data.filter((item, index, arr) => {
            return item.name === route.query.title
          })
        }
        if (res.code === '999') {
          console.log(res)
        }
      })
    }
    function toDetail (title, detail, imgUrl) {
      router.push({ path: '/artistListDetail', query: { title, detail, imgUrl } })
    }
    const goBack = () => {
      router.go(-1)
    }
    onMounted(() => {
      getArtistList()
      findartistListDetail().then(res => {
        for (let i = 0; i < list.value[0].data.length; i++) {
          res.data.forEach((item, index, arr) => {
            if (list.value[0].data[i].p.slice(0, 5) === arr[index].data[0].data.p.slice(0, 5)) {
            //   console.log(arr[index].data[0].data.p)
              list.value[0].data[i].detail = arr[index].data[0].data.p
              list.value[0].data[i].imgUrl = arr[index].data[0].data.imgUrl
            //   console.log(list.value[0].data[i].detail, list.value[0].data[i].imgUrl)
            }
          })
        }
      })
    })
    return { list, toDetail, goBack, name }
  }
}
</script>

<style lang="less" scoped>
.main{
    margin-bottom: 10px;
    .card{
        display: flex;
    }
    .footer{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 16px;
        div{
            font-size: 18px;
            font-weight: 700;
        }
        p{
            font-size: 14px;
            color:rgb(153,153,153);
        }
        span{
            font-size: 12px;
            color: #adadad;
        }
    }
}
.time {
  font-size: 12px;
  color: #000000;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>
